<template>
    <div class="video-player">
        <div class="mask">
            <a-row v-for="v in Object.keys(videoInfo)" :key="v" type="flex">
                <a-col style="width: 100px;">{{ v }}</a-col>
                &nbsp;&nbsp;&nbsp;
                <a-col v-if="Array.isArray(videoInfo[v])">
                    <a-row v-for="(item, k) in videoInfo[v]" :key="k" type="flex">{{ item }}</a-row>
                </a-col>
                <a-col v-else>
                    {{ videoInfo[v] }}
                </a-col>
            </a-row>
            <a-row type="flex" v-for="v in Object.keys(videoData)" :key="v">
                <a-col style="width: 100px;">{{ v }}</a-col>
                &nbsp;&nbsp;&nbsp;
                <a-col>{{ videoData[v] }}</a-col>
                <!-- <a-col>{{ videoData.currentKbps | myFixed }}&nbsp;KB/s</a-col> -->
            </a-row>
        </div>
        <div id="xgplayer"></div>
        <!-- <div class="progress"></div>
        <div class="slider-wrap"><a-slider v-model="progressVal" :default-value="0" :tip-formatter="formatter" /></div> -->
    </div>
</template>
<script>
    import xgplayer from 'xgplayer'
    import socketIO from 'socket.io-client'
    import moment from 'moment'
    var socket = null
    export default {
        name: 'VideoPlayer',
        data() {
            return {
                mp: null,
                video: null,
                videoInfo: {},
                // videoInfo: {
                //     format: 'matroska,webm',
                //     audio: 'aac (LC)',
                //     video: 'h264 (High)',
                //     duration: '01:49:56.55',
                //     video_details: [
                //         'h264 (High)',
                //         'yuv420p(progressive)',
                //         '1920x1080 [SAR 1:1 DAR 16:9]',
                //         '24 fps',
                //         '24 tbr',
                //         '1k tbn (default)',
                //     ],
                //     audio_details: ['aac (LC)', '48000 Hz', 'stereo', 'fltp (default)'],
                // },
                videoData: {},
                progressVal: 0,
                curTime: 0,
                interval: null,
                milliseconds: 0,
                lastTimemark: 0,
                lastDate: Date(),
            }
        },
        watch: {
            milliseconds(nval) {
                const duration = moment.duration('01:49:56.55').as('milliseconds')
                console.log(nval, duration, (nval / duration) * 100)
                this.progressVal = (nval / duration) * 100
            },
            progressVal(nval) {
                let ms = Math.floor(moment.duration('01:49:56.55').as('milliseconds') * nval * 0.01)
                let d = moment.duration(ms, 'milliseconds')
                let hour = d.hours() + ':' + d.minutes() + ':' + d.seconds()
                this.curTime = moment(hour, 'HH:mm:ss').format('HH:mm:ss')
            },
            curTime(nval) {
                this.milliseconds = moment.duration(nval).as('milliseconds')
            },
        },
        mounted() {
            const query = this.$route.query
            this.video = JSON.parse(query.video)

            this.initPlayer()
            this.createSocket()

            // this.progressInterval()
        },
        beforeDestroy() {
            clearInterval(this.interval)
            socket?.disconnect()
        },
        filters: {
            myFixed(v) {
                return v ? v.toFixed(1) : 0
            },
        },
        methods: {
            progressInterval() {
                if (!this.interval) {
                    const that = this
                    this.interval = setInterval(() => {
                        that.milliseconds += 1000
                        console.log('milliseconds: ', that.milliseconds)
                    }, 1000)
                }
            },
            formatter() {
                if (this.video?.path) {
                    let ms = moment.duration('01:49:56.55').as('milliseconds') * this.progressVal * 0.01
                    let d = moment.duration(ms, 'milliseconds')
                    let hour = d.hours() + ':' + d.minutes() + ':' + d.seconds()
                    this.curTime = moment(hour, 'HH:mm:ss').format('HH:mm:ss')
                    const { path: _path } = this.video
                    const path = encodeURI(_path)
                    this.mp.video.src = `/play?path=${path}&startTime=${this.curTime}`
                }
                return this.curTime
            },
            initPlayer() {
                const { path: _path } = this.video
                const path = encodeURI(_path)
                this.mp = new xgplayer({
                    id: 'xgplayer',
                    url: `/play?path=${path}&startTime=${this.curTime}`,
                    // url: '',
                    width: '100%',
                    height: '100%',
                    // controls: false,
                    autoplay: true,
                })
                console.log(this.mp)
            },
            createSocket() {
                socket = socketIO('ws://localhost:3667')
                socket.on('videoInfo', (data) => {
                    this.videoInfo = JSON.parse(data)
                })
                socket.on('videoData', (data) => {
                    this.videoData = { ...data }
                    const timemark = moment.duration(data.timemark).as('milliseconds')
                    const ms = timemark - this.lastTimemark
                    const now = Date()
                    const x = moment(now).diff(moment(this.lastDate), 'seconds')
                    console.log(ms / 1000, x, x - ms / 1000)
                    this.lastTimemark = timemark
                    this.lastDate = now
                })
                socket.on('disconnect', () => {})
                socket.on('error', () => {})
            },
        },
    }
</script>
<style lang="less" scoped>
    .video-player {
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        overflow: hidden;
        .mask {
            position: absolute;
            background: grey;
            color: white;
            z-index: 2;
            padding: 10px;
            margin: 5px;
            border-radius: 3px;
        }
        #xgplayer {
            width: 100% !important;
            height: 100% !important;
        }
        .progress {
            height: 50px;
            background: white;
            position: absolute;
            top: calc(100% - 50px);
            left: 0px;
            width: 100%;
        }
        .slider-wrap {
            position: absolute;
            left: 0px;
            top: calc(100% - 50px - 23px);
            left: 0px;
            width: 100%;
        }
    }
</style>
